/*color registrare #00a36f*/
body{ background: #ecf5f2}
body.login{ background:url(elementi/slide-login.jpg) no-repeat; background-size:cover; height:auto; min-height:100%}
#head{ background: #cde4dd url(elementi/bg-head.jpg) no-repeat center right; background-size: 80%; border-bottom: 1px solid #d1eae3; height: 160px}
#back{ height: 100%; height: 100px; bottom: 15px; top: auto; left: 0; background-size: contain; background-position: 20px center;

}
#head:before{ content: ''; display: block; position: absolute; bottom: 0; height: 100%; width: 700px; background: #ccc;/* /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+68,0+100 */
background: -moz-linear-gradient(left,  rgba(255,255,255,1) 0%, rgba(255,255,255,1) 68%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 68%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 68%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */
 }

#head:after{ content: 'Piattaforma Nazionale Registri di Patologia'; content: ''; display: block; position: absolute; line-height: 30px; height: 30px; width: 100%; left: 0px; padding: 0 0 0 30px; font-size: 11px; top: 0; font-family: Georgia, Times, 'Times New Roman', serif; font-style: italic; padding-top: 0px; box-sizing: border-box; color: #00a36f; border-bottom: 0px solid #fff; background: #57bf9e url(elementi/logo-neg.png) no-repeat 30px center; background-size: contain; background-size: 190px  }

#content{ padding-top: 4px; box-sizing: border-box}

/*lista centri*/
.lista-centri{ float: right; clear: both; padding: 5px 0 0 0; max-width: 200px; width: 100%; box-sizing: border-box }
.lista-centri .combo{ border: 0; font-size: 16px; height: 30px; line-height: 30px }
/*TOOLBAR*/
#toolbar{ height: 45px}
#toolbar .pul-invia a{padding:0 10px 0 10px; height:30px; border-radius:3px; line-height:30px; font-size: 15px}

/*MENU TOOL*/
#menu-tool { border-bottom:0px solid #d1e8e1; background: #ecf5f2; padding: 15px 0}
#menu-tool ul{ padding:6px 20px; list-style:none; font-size:12px; height:40px}
#menu-tool li { float:left; font-size:15px; margin:0 5px 0 0}

#menu-tool li a{ height:40px; line-height:40px; display:block; padding:0 10px 0 10px; font-weight:600;
 border-right:0px solid #CCC;  border-left:0px solid #CCC; color:#333; text-decoration:none; position:relative}
#menu-tool li a:hover, #menu-tool li a.attivo{ color:#00a36f; background:#e1e1e1 }
#menu-tool li a i{color:#00a36f;}
#menu-tool li a{ background: #e1e1e1; color: #333; border-radius: 5px;  border-bottom:2px solid rgba(0,0,0,0.2);}
#menu-tool li.cerca a, #menu-tool li.manuale a, #menu-tool li.statistiche a{ background: #e1e1e1; color: #333; }
#menu-tool li.statistiche a:before{ content:'\f080'; content: none; position:absolute; top:0; left:0; font-family: FontAwesome,sans-serif; display:inline-block; display: none;height:1em; width:1em; font-size:1.4em;}

#menu-tool li.totale a{ background: #e1e1e1; color: #333; }
#menu-tool li.nuovo{ float:right}
#menu-tool li.nuovo a{ background: #00a36f; color: #fff; border-radius: 5px;  border-bottom:2px solid rgba(0,0,0,0.2);}
#menu-tool li.nuovo a i{ color: #fff }

#menu-compilatore{ float: left}
#compilatore{ top: 40px}
#compilatore ul{ margin: 0; padding: 0; line-height: 1em }
#compilatore ul li{ margin: 0; padding: 0; line-height: 1em; font-size: 15px; display: inline-block}
#compilatore p.compilatore{ line-height: 1em; padding: 0.5em 0.5em; font-size: 18px; text-align: right}
#compilatore li a{ padding: 0.3em 0.5em;}

#cerca{ background: #d0e6df}
#cerca .campo, #cerca .combo{ border: 1px solid #fff}
#cerca label{ color: #71988c}

/*lista pazienti*/
table.tot th, table.tot td{ padding:10px 10px; border-bottom:2px solid #d1e8e1; border-top:4px solid #ecf5f2}
table.tot caption{border-bottom:2px solid #d1e8e1; border-top:0px solid #ecf5f2}
td.paziente .status i{ color: #00a36f}
table.tot td.paziente:before{ color: #32aaf1}

#paging li a{border-radius:5px; color:#999; background:#fff;}
#paging li.attivo a:link, #paging li.attivo a:visited{  color:#333; background:#6ad0af; font-weight:600; border-radius:5px}
#paging li a:hover, #paging li a:focus{background:#fff; color: #333; text-decoration:none;}

/*follow up new*/
.followup li.new-follow,  table.tot td .followup li.new-follow{ background: #fff; border-radius: 5px; border-bottom:2px solid rgba(0,0,0,0.2); max-width: 23%; overflow: hidden }
.followup li.new-follow a,  table.tot td .followup li.new-follow a{ background: none; border: none; border-bottom: 0; color: #666; font-size: 13px; letter-spacing: normal; padding: 2px 8px 2px 8px}
.followup li.new-follow a:hover, table.tot td .followup li.new-follow a:hover{ background: none; color: #333}
.followup li.new-follow a.data,  table.tot td .followup li.new-follow a.data{ font-size: 15px; padding: 0.3em 0.5em }

/*grafici*/
#risultati{ overflow: hidden}
#stage.stats form{ width: 25%; float: right; padding-right: 20px; }
#stage.stats form label{font-size: 13px}
#stage.stats form .x20, #stage.stats form .x25, #stage.stats form .x33, #stage.stats form .x50, #stage.stats form .x66, #stage.stats form .x70{ width: 100%}
#stage.stats form .pul-invia{ margin: 30px 0 0 0; text-align: center}

.highcharts-credits:hover {cursor:auto!important;}
.loading {margin-top: 10em;text-align: center;color: gray;}
.grafico{height: 500px; min-width: 310px; max-width: 1200px; margin: 0 auto; }
.grafico.basso{height: 350px; }

#risultati{ max-width:1500px}
.box-stat{ display:block; float:left; box-sizing:border-box; padding:30px 10px; overflow:hidden; margin-bottom:20px; }
.box-stat .box-stat canvas{ float:left}
.box-stat table{ box-sizing:border-box}

#content .general-stat{ background:#fff; margin-bottom:1em; border-bottom:2px solid #f1f1f1; overflow:hidden}
#content .general-stat .box-stat p{ text-align:center; font-size:1.1em; color:#666; padding:0; margin:0}
#content .general-stat .box-stat p span{ font-size:2.5em; padding:10px 0; color:#14a0bf; display:block; font-weight:600}
#content .general-stat  .box-container .box-stat{padding:1em;}

.box-stat ol.lista-dati{ margin:1em 0 0 0; padding:0 0.8em; font-size:1.2em}
.box-stat ol.lista-dati li{ border-top:1px solid #e1e1e1; font-size:0.9em; color:#333; list-style-position:inside; padding:10px}
.box-stat ol.lista-dati li span{ float:right; font-size:0.9em; padding-top:0.2em; color:#14a0bf; text-transform:uppercase}
.box-stat table.linkable, .box-stat table.hoverble{ margin:1em 0 0 0em; padding:0; font-size:1.2em}
.box-stat table.linkable th, .box-stat table.hoverble th{ background:#f1f1f1; color:#ccc; border-top:1px solid #e1e1e1; padding:10px; font-size:0.7em; text-align:right}
.box-stat table.linkable th.left, .box-stat table.hoverble th.left{ text-align:left; padding:10px}
.box-stat table.linkable td, .box-stat table.hoverble td{ font-size:0.9em; padding:10px; text-align:right;  }
.box-stat table.linkable td strong, .box-stat table.hoverble td strong{color:#14a0bf}
.box-stat table.linkable td.left, .box-stat table.hoverble td.left{ text-align:left; padding:10px}

.box-stat table.legenda{ height:30px}
.box-stat ul{ margin:0 0 15px 0; padding:2px 0; list-style:none;}
.box-stat ul li{ padding:2px 0;}

.legend-box{ width:33%; float:left; display:block}

#content .box-stat h2, #content .box-container h2{ color:#333;  padding:1em; font-size:0.9em; text-transform:uppercase; text-align:center; font-weight:600; margin:0em 0 0 0}
#content .box-stat h3{ font-size:15px; text-align:left; padding:0 0 5px 0; margin:0}
#content .box-stat td h3{ text-align:center}
#content .box-stat a.print-graph{ display:inline-block; color:#333; margin-left:5px; padding:5px 8px; font-size:0.8em; border-bottom:2px solid rgba(0,0,0,0.2); 
text-transform:uppercase; background:#f1f1f1; border-radius:3px }

#content .box-stat p{ font-size:12px; text-align:center; padding:5px 0 10px 0; margin:0 0 10px 0}
#content .box-stat table{ table-layout:fixed}
#content .box-stat td{ vertical-align:top; }

.tab-nav{ margin:20px 0 10px 0 }
.tab-nav ul{ list-style:none; text-align:center; margin:0; padding:0}
.tab-nav li{ display:inline-block; margin:0 5px;  border:1px solid #e1e1e1}
.tab-nav a{ display:block; padding:0.5em 0.7em; font-size:2em; color:#ccc; font-weight:600;}
.tab-nav a:hover{ background:#f1f1f1}
.tab-nav li.active a{ border-bottom:3px solid #333; color:#333}

.doughnut-legend { text-align:center}
.doughnut-legend li{ display:inline-block; font-size:0.75em; margin-right:10px}
.doughnut-legend li span{
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 5px;
}

/*scheda*/
#stage form .pul-invia{ margin-top: 20px}
#tab{ background: #b2e4d5}
#tab li a{ background: #e3f5ef}
#toolbar{ background: #d0e6df}
#stage table.tot th{ background: #b2e4d5; color: #497367; border: 0; font-size: 13px;}
#stage table.tot th, #stage table.tot td{ border: 0; border-bottom: 2px solid #f1f1f1; }
#stage table.tot td{white-space: nowrap; font-size: 15px}

#stage h1{ border-bottom: 1px solid #d0e6df; margin-bottom: 20px}
#stage .date{ height: 35px; line-height: 35px; position: relative; background:#fff url(elementi/calendar.svg) no-repeat center right 5px; background-size: 20px }

#head-fancybox{ background: #b2e4d5}

/*TAG PAZIENTE*/
.tag{ overflow: hidden; padding: 0}
.tag a, table.tot td .tag a{ display: inline-block; font-size: 11px; text-transform: uppercase;  color: #fff; padding: 2px 5px; border-radius: 2px; float: left; margin: 5px 5px 0 0}
.tag a.red{ background: rgba(209, 126, 126, 0.99)}
.tag a.brown{ background: #8b683f}
.tag a.pink{ background: #bb81be}
.tag a.orange{ background: #f59614}
.tag a.blu{ background:#4d83c3}
.tag a:hover, table.tot td .tag a:hover{ text-decoration: none; background: #333}

table.tot td.patient-med{ width: 70%}
table.tot td.patient-med .pato-list li{ width: 25%; float: left; box-sizing: border-box}
.patient-med .pato-list li:nth-child(3n+1){ clear: none}
.patient-med .pato-list li.core-data{ background: none}

table.tot td.paziente .data-nascita{ font-weight: 400; display: block; font-size: 15px}

/*Cartella clinica*/
.cartella{ border-top:1px solid rgba(0,0,0,0.05); margin-top:10px; background:#dcf1ea; border-radius:5px}
.cartella h2{ margin:0; padding:10px 10px; font-size:14px; color:#666; text-transform:uppercase; font-weight:600; letter-spacing:0.5px;}

.cartella ul{ margin:0; padding:10px 10px 10px 10px; list-style:none; overflow: hidden; overflow-y: scroll; max-height: 200px}
.cartella li{ display:inline-block; letter-spacing:0.5px; font-weight:600; margin-right:5px}
.cartella a, table.tot td .cartella a{ display:block; padding:0.3em 0.5em; font-size:15px; color:#000000; background:#fff; border-radius:5px; border-bottom:2px solid rgba(0,0,0,0.2)}
.cartella a:hover, table.tot td .cartella a:hover{ text-decoration:none; background:#333; color:#fff }
/*follow up new*/
.cartella li.new-follow,  table.tot td .cartella li.new-follow{ background: #fff; border-radius: 5px; border-bottom:2px solid rgba(0,0,0,0.2); width: 100%; overflow: hidden; float: left; margin-right: 0%; margin-bottom: 5px }
.cartella li.new-follow a,  table.tot td .cartella li.new-follow a{ background: none; border: none; border-bottom: 0; color: #666;  letter-spacing: normal;}
.cartella li.new-follow .more-text{ overflow: hidden; padding: 10px 20px; background: #f2f7f5}
.cartella li.new-follow .more-text a,  table.tot td .cartella li.new-follow .more-text a{ width: 25%; box-sizing: border-box; float: left; font-size:12px}
.cartella li.new-follow a:hover, table.tot td .cartella li.new-follow a:hover{ background: none; color: #333}

/*Modifiche 18 marzo 2020*/
.cartella li.new-follow .more-text a,  table.tot td .cartella li.new-follow .more-text a{ width: 33.3%; box-sizing: border-box; float: left; font-size:16px}

.cartella h3{ overflow: hidden; font-weight: 200; padding: 5px; margin: 0 0 0px 0; font-size: 18px}
.cartella h3 a,  table.tot td .cartella h3 a{ font-size: 18px; display: inline-block; float:left; padding: 5px}
.cartella h3 a.type, table.tot td .cartella h3 a.type{ width: 80px; background: #fff; text-align: center; border-right: 1px solid #ccc; border-radius: 0; margin-right: 5px}
.cartella h3 .viewMore{ float: right; padding: 5px 0}
.cartella h3 .viewMore a,  table.tot td .cartella .viewMore a{ padding: 0 15px; font-size: 1.1em}
/* Wide Layout: +1400px */
@media only screen and (min-width: 1400px) {
    #stage form{ max-width: none; padding-right: 25%; position: relative}
    #stage section.note{ position: absolute; top: 0; right: 0; height: 500px; width: 25%; margin: 0;}
    #stage section.note .parola{ height: auto; padding: 0 20px}
    #stage section.note .campo2{ height: 400px}
    #stage section.note label{ color: #333; font-size: 20px }
}

/* Tablet Layout: 768px */
@media only screen and (max-width: 800px) {
    #tab{}
    #tab ul{ padding: 5px 0 0 0; text-align: center}
    #tab li a{ font-size: 12px; padding: 0.5em 0.5em}
    
    #stage label{ font-size: 13px}
}

.border1 {
    border-bottom: 1px solid white;
    margin-bottom: 20px; margin-top:20px;
}